<template>
  <div class="home_time" v-if="weather" >
    <div class="time_left">
        <div class="date" style="font-size:25px">
            {{time1}}
        </div>
        <div class="time_week">
            {{time2}} {{week_list[week]}}
        </div>
         
    </div>
    
	<div class="weather" style="text-align: center;display: flex;justify-content:center;">

        <div style="align-self:center">
            <div >{{weather.city}} 今日天气</div>
                <!-- <br> -->
            <div>{{weather.month[0].night.temperature}}℃ ~ {{weather.month[0].day.temperature}}℃ 
                <img v-bind:src="img" width="20" style="vertical-align: sub;" /> {{weather.day.phrase}}
            </div>
        </div>

		<!-- <p>空气质量：<a>{{weather.day.air_level}}</a> &nbsp;&nbsp;气压：<a>{{weather.day.altimeter}}mb</a> &nbsp;&nbsp;湿度：<a>{{weather.day.humidity}}%</a></p>
		<p>白天：{{weather.month[0].day.narrative}}</p>
		<p>夜间：{{weather.month[0].night.narrative}}</p> -->
	</div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import axios from 'axios'
export default {
    data(){
        return{
            timeId:'',
            sday:'',
			weather: '',
            time1:'',
            time2:'',
            week:'',
            week_list:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
            city:'',
            tem:'',

        }
    },
    created(){
        const that = this
        this.timeId = setInterval(()=>{

        this.time1 =dayjs().format('YYYY年MM月DD日');
        this.time2 =dayjs().format('HH:mm:ss');
        this.week = dayjs().day();

        }, 1000);

        let appid = '94342576';
        let appsecret = '20eFJb6e';
        console.log('mounted')
        axios({
            method: 'get',
            url: 'http://v1.yiketianqi.com/api?unescape=1&version=v63&appid=' + appid + '&appsecret=' + appsecret
        }).then(res => {
            console.log(res.data);
            that.weather = res.data
            // this.img = 'https://xintai.xianguomall.com/skin/peach/' + res.data.day.phrase_img + '.png';
        });


    },
    mounted() {
        // http://v1.yiketianqi.com/api?unescape=1&version=v63&appid=56996592&appsecret=d8Ghq2mv&city=罗山
            // let appid = '43656176';//43656176
			// let appsecret = 'I42og6Lm';//I42og6Lm

    },
    methods:{

    }
}
</script>

<style scoped>
.home_time{
    width: 1200px;
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    margin-bottom: -15px;
}
.weather{
    /* border: solid 1px gray; */
    padding: 5px;
    border-radius: 5px;
    height: 50px;
    width: 200px;
    background: #fff;

}
.time_left{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
</style>